<template>
  <view class="container flex column">
    <u-tabs :list="publicize_column_type" lineColor="#2488F5" lineWidth="25" :current="activeIndex"
      :inactiveStyle="inactiveStyle" :activeStyle="{ color: '#333333' }" @click="tabsClick"></u-tabs>

    <scroll-view class="sub-tabs-container flex" :scroll-x="true">
      <view :key="index" class="sub-tabs-item" @click="subTabsClick(item)" v-for="(item, index) in publicize_type"
        :class="sub_tabs_index == item.value ? 'sub-tabs-item-active' : ''">
        {{ item.text }}
      </view>
    </scroll-view>

    <scroll-view scroll-y="true" @scrolltolower="scrollBottom" v-if="dataSource.length" class="main-container f1">
      <view class="card-item flex column" v-for="item in dataSource"
        :data-url="`/publicSecurityPropaganda/detail?id=${item.id}&publicizeTypeName=${item.publicizeTypeName}`"
        @click="handleClickRouter">
        <view class="main-title">{{ item.title }}</view>
        <view class="column">
          <view class="label">所属分类: <text>{{ item.publicizeTypeName }}</text></view>
        </view>
        <view class="create-time">
          <view class="label">发布时间: <text>{{ item.createTime }}</text></view>
        </view>
      </view>

      <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    getAction
  } from "../utils/request.js";
  import {
    ajaxGetDictItems
  } from "@/api/api.js";
  import {
    handleClickRouter
  } from "@/utils/util.js";
  export default {
    data() {
      return {
        activeIndex: 0,
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        scrollTop: 0,
        dataSource: [],
        pageBottom: false,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },

        columnType: "",
        publicizeType: "",

        publicize_column_type: [],
        publicize_three_no: [],
        publicize_five_prohibitions: [],
        publicize_four_reverse: [],
        publicize_four_preventions: [],
        publicize_type: [],

        sub_tabs_index: 0,
      };
    },
    onLoad() {},
    onShow() {
      // navigateTo 不会重新加载目标页面 同时 onLoad 只执行一次 所以在这里重新初始化
      this.activeIndex = 0;
      this.sub_tabs_index = 0;
      this.getDist();
    },
    methods: {
      handleClickRouter,
      scrollHeight(e) {
        uni.setStorageSync("scrollTop", e.detail.scrollTop);
      },
      scrollBottom(e) {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) {
          this.get_data();
        } else {
          this.pageBottom = true;
        }
      },

      tabsClick(item) {
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");

        this.activeIndex = item.index;
        this.pageConfig.pageNo = 1;

        this.sub_tabs_index = 0;

        this.publicize_type = [
          ...[{
            text: "全部",
            title: "全部",
            value: "0",
          }, ],
          ...this[item.value.value],
        ];
        this.columnType = item.value.value;

        this.get_data();
      },

      async getDist() {
        let {
          result: publicize_column_type
        } = await ajaxGetDictItems({
          code: "publicize_column_type",
        });
        this.publicize_column_type = publicize_column_type.map((item) => {
          return {
            name: item.text,
            value: item,
          };
        });

        // 三无
        let {
          result: publicize_three_no
        } = await ajaxGetDictItems({
          code: "publicize_three_no",
        });
        this.publicize_three_no = publicize_three_no;

        // 五禁
        let {
          result: publicize_five_prohibitions
        } = await ajaxGetDictItems({
          code: "publicize_five_prohibitions",
        });
        this.publicize_five_prohibitions = publicize_five_prohibitions;

        // 四反
        let {
          result: publicize_four_reverse
        } = await ajaxGetDictItems({
          code: "publicize_four_reverse",
        });
        this.publicize_four_reverse = publicize_four_reverse;

        // 四防
        let {
          result: publicize_four_preventions
        } = await ajaxGetDictItems({
          code: "publicize_four_preventions",
        });
        this.publicize_four_preventions = publicize_four_preventions;

        this.publicize_type = [
          ...[{
            text: "全部",
            title: "全部",
            value: "0",
          }, ],
          ...this[publicize_column_type[0].value],
        ];
        this.columnType = publicize_column_type[0].value;

        this.get_data();
      },

      subTabsClick(item) {
        this.sub_tabs_index = item.value;
        if (item.value != 0) this.publicizeType = item.value;
        this.get_data();
      },

      async get_data() {
        let data = {
          columnType: this.columnType,
          publicizeType: this.publicizeType,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };
        let {
          result: {
            records
          },
        } = await getAction("/mini/common/publicize_message/page", data);

        this.dataSource = records;
      },
    },
  };
</script>

<style scoped lang="scss">
  .f1 {
    flex: 1;
  }

  .flex {
    display: flex;
  }

  .align-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .column {
    flex-direction: column;
  }

  .container {
    height: 100%;

    .sub-tabs-container {
      padding: 22rpx 24rpx 14rpx 24rpx;
      width: 100%;
      box-sizing: border-box;
      white-space: nowrap;

      .sub-tabs-item {
        height: 50rpx;
        background: #f5f7f9;
        border-radius: 8rpx;
        margin-left: 22rpx;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #000000;
        text-align: center;
        line-height: 50rpx;
        display: inline-block;
        padding: 0 15px;

        &:nth-of-type(1) {
          margin-left: 0;
        }
      }

      .sub-tabs-item-active {
        color: #ffffff;
        background: linear-gradient(90deg, #3eb0ff 0%, #2469f2 100%);
      }
    }

    .main-container {
      background: #f9f9f9 !important;

      // min-height: 0;
      // overflow: scroll;
      .card-item {
        height: 224rpx;
        background: #ffffff;
        border-radius: 8rpx;
        border: 1rpx solid #f1f1f1;
        margin: 0 19rpx;
        margin-top: 10rpx;
        padding: 30rpx;
        justify-content: space-between;

        .main-title {
          font-size: 30rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #000000;
        }

        .column {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #1a1a1a;
        }

        .label {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
    }
  }
</style>